<template>
  <div class="modalbox">
    <ion-content padding>
		 <span class="modal_close iconfont icon-guanbi" @click="closeModel"></span>
		 <div class="listbox1" >
			<div class="box_left">
				<img :src="product.img" v-if="product && product.img !=null" />
				<img src="../assets/images/p1.jpg" v-else />
			</div>
			<div class="box_center">
				<h3 class="tit">{{product.name}}</h3>
				<p class="price">
					<strong class="cprice">￥<em>{{product.cprice}}</em></strong>
					<span class="uprice">{{product.uprice}}{{product.spec1}}</span>
				</p>
			</div>
			<div class="box_right"></div>
		 </div>
		 <!-- <div class="box_tit">请选择规格</div> -->
		 <div class="box_spec">
		 	<button v-for="(item, index) in product.specArr" v-bind:class="[current==index?'active':'']" @click="getchecked(index)" :key="item.value">
		 		{{item.name}}
		 	</button>
		 </div>
		 <div class="box_num">
		 	<div class="tit">选择数量</div>
		 	<div class="con">
				<!--<div class="numberbox">-->
					<!--<button type="button" id="reduce" @click="reduce()">-</button>-->
					<!--<input type="number" id="text" v-model="products.number">-->
					<!--<button type="button" id="add" @click="add()">+</button>-->
				<!--</div>-->
				<van-stepper v-model="products.number" />
			</div>
		 </div>
    </ion-content>
	<div class="footbar">
		<button class="foot_btn" plain>
			<em class="iconfont icon-shouye"></em>
			<span class="txt">首页</span>
		</button>
		<button class="foot_btn" plain @click="goCart()">
			<em class="iconfont icon-gouwuche1"></em>
			<span class="txt">购物车</span>
		</button>
		<button class="foot_btn1">
			<span class="txt">加入购物车</span>
		</button>
		<button class="foot_btn2">
			<span class="txt">立即购买</span>
		</button>
	</div>
  </div>
</template>

<script>
  import {Stepper} from 'vant'
  export default {
  name: 'Modal',
  components:{[Stepper.name]: Stepper,},
  props: {
    product: {
		type: Object,
		default: {}
	  },
  },
  data() {
    return {
      content: 'Content',
	  products:{
	  	number:0,
	  },
	  current:0,
    }
  },
  methods: {
	getchecked(index) {
		this.current=index
	},
    closeModel(){
      this.$ionic.modalController.dismiss()
    },
	add(){
		this.products.number++;
	},
	reduce(){
		if(this.products.number>=1){
		this.products.number--;
		}
	},
	goCart(){
      this.$ionic.modalController.dismiss({
		'result':'cart'
	  })
	},
  },
}
</script>
<style>
	.sc-ion-modal-ios-h {
		--height: 60%;
		align-items:flex-end;
	}
	.modal-wrapper{
	}
	.modalbox{}
	.modalbox .ios{
		--background: var(--ion-background-color,#fff);
	}
	.modalbox .modal_close{position: absolute; right: 0.75rem; top: 0.75rem; color: #999; font-size: 1.2rem;}
	.modalbox .box_tit{text-align: left; font-size:0.8rem; color: #666; padding:0.5rem 0.75rem;}
	.modalbox .box_spec{padding:0.75rem 0.75rem; height:auto; overflow: hidden;display: flex;flex-wrap: wrap; justify-content:flex-start;}
	.modalbox .box_spec button{padding:0 0.75rem; height:2.2rem; line-height:2.2rem; overflow: hidden; background: #eee; display: block; color: #333; font-size:0.8rem; margin:0 0.5rem 0.5rem 0; border-radius:0.5rem;}
	.modalbox .box_spec button::after{display: none;}
	.modalbox .box_spec button.active{background: #f93; color: #fff;}
	.modalbox .box_num{padding:0.5rem 0.75rem; height:auto; overflow: hidden; display: flex; justify-content:space-between;}
	.modalbox .box_num .tit{font-size:0.8rem;color: #666;}
</style>